<template>
	<div class="wrap" v-loading="loading">
		<!-- login password -->
		<div :class="['login', isPwd === true ? 'password' : '']">
			<el-form :model="loginFomr" :rules="loginRules" ref="loginRef">
				<div class="login-header">
					<div class="hand"></div>
					<div class="hand hand-r"></div>
					<div class="arms">
						<div class="arm"></div>
						<div class="arm arm-r"></div>
					</div>
				</div>
				<div class="login-body">
					<el-form-item prop="login_account">
						<el-input v-model="loginFomr.login_account" prefix-icon="iconfont icon-denglukuangyonghu" placeholder="请输入用户账户"
						 :autofocus="true"></el-input>
					</el-form-item>
					<el-form-item prop="login_password">
						<el-input v-model="loginFomr.login_password" prefix-icon="iconfont icon-lock_outline_u19" placeholder="请输入用户密码"
						 @focus="isPwd = true" @blur="isPwd = false" type="password"></el-input>
					</el-form-item>
					<el-form-item prop="login_code">
						<el-row :gutter="10">
							<el-col :span="16">
								<el-input v-model="loginFomr.login_code" prefix-icon="iconfont icon-login_test" placeholder="请输入验证码"></el-input>
							</el-col>
							<el-col :span="8">
								<!-- 验证码 -->
								<div class="code" @click="refreshCode">
									<s-identify :fresh="flag" @makedCode="getMakedCode"></s-identify>
								</div>
							</el-col>
						</el-row>
					</el-form-item>
				</div>
				<div class="login-footer">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" @click="resetForm">重置</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import SIdentify from './Identify.vue'
	export default {
		components: {
			SIdentify
		},
		data() {
			// 表单自定义验证规则
			var checkPassword = (rule, value, callback) => {
				// 验证密码的正则表达式
				const regPassword = /^([0-9]|[a-zA-Z]){6,13}$/

				if (regPassword.test(value)) {
					// 合法
					return callback()
				} else {
					callback(new Error('验证不通过,请输入长度在 6 到 13 个字符!'))
				}
			};

			return {
				// 登录表单数据对象
				loginFomr: {
					login_account: '15110283003',
					login_password: '283003',
					login_code: '',
				},
				// 登录表单验证规则
				loginRules: {
					login_account: [{
						required: true,
						message: '请输入用户账户',
						trigger: 'blur'
					}],
					login_password: [{
							required: true,
							message: '请输入用户密码',
							trigger: 'blur'
						},
						// 自定义验证规则
						{
							validator: checkPassword,
							trigger: 'blur'
						}
					],
					login_code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}, ]
				},
				// 遮挡眼睛
				isPwd: false,
				// 验证码数据
				flag: true, //code该值变化，就会触发刷新
				code: '', //刷新后的验证码
				loading: false
			}
		},
		// 验证码初始化
		mounted() {
			this.flag = !this.flag;
		},
		methods: {
			// 重置表单
			resetForm() {
				this.$refs.loginRef.resetFields()
				this.flag = !this.flag;
			},
			login() {
				this.$refs.loginRef.validate(async (valid) => {
					// 表单预校验
					if (!valid) return this.$message.error('验证失败')

					if (this.loginFomr.login_code !== this.code) return this.$message.error('密码错误或者验证码错误！')
					
					this.loading = true
					
					// 发起请求
					const res = await this.$http.post('/user_login/Login', {
						"login_account": this.loginFomr.login_account,
						"login_password": this.loginFomr.login_password
					})
					
					if(res.status !== 200) return this.$message.error('登录失败！')
					// 没有账号也能登录进去!有bug,我们自己给个token
					window.sessionStorage.setItem('token','zhaosongbo')
					this.loading = false;
					this.$router.push('/home')
		

				})
			},
			// 切换验证码
			refreshCode() {
				this.flag = !this.flag;
			},
			// 获得验证码
			getMakedCode(code) {
				this.code = code
				console.log("getMakedCode:", this.code);
			}
		}

	}
</script>

<style lang="less" scoped>
	.code {
		height: 40px;

		.s-canvas {
			height: 100%;
		}
	}



	.wrap {
		width: 100%;
		height: 100vh;
		background: url(../assets/images/1.jpg) no-repeat center center/cover;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login {
		width: 400px;
		max-width: 400px;
		background: #fff;
		border: 1px solid #ddd;
		position: relative;

		.login-header {
			width: 211px;
			height: 108px;
			background: url(../assets/images/owl-login.png);
			position: absolute;
			left: 50%;
			top: -100px;
			transform: translateX(-50%);

			.hand {
				width: 34px;
				height: 34px;
				border-radius: 40px;
				background-color: #472d20;
				transform: scaleY(0.6);
				transition: 0.3s ease-out;
				position: absolute;
				left: 14px;
				bottom: -8px;
			}

			.hand-r {
				left: 170px;
			}

			.arms {
				top: 58px;
				position: absolute;
				width: 100%;
				height: 41px;
				overflow: hidden;

				.arm {
					width: 40px;
					height: 65px;
					position: absolute;
					left: 20px;
					top: 40px;
					background-image: url(../assets/images/owl-login-arm.png);
					transition: 0.3s ease-out;
					transform: rotate(-20deg);
				}

				.arm-r {
					transform: rotate(20deg) scaleX(-1);
					left: 158px;
				}
			}
		}

		.login-body {
			padding: 30px 30px 0;
		}

		.login-footer {
			padding: 15px 30px 20px;
			display: flex;
			justify-content: flex-end;
		}
	}

	.password {
		.hand {
			transform: translateX(42px) translateY(-15px) scaleX(0.7) !important;
		}

		.hand-r {
			transform: translateX(-42px) translateY(-15px) scaleX(0.7) !important;
		}

		.arm {
			transform: translateX(40px) translateY(-40px) !important;
		}

		.arm-r {
			transform: translateX(-40px) translateY(-40px) scaleX(-1) !important;
		}
	}
</style>
